[既存アプリに学ぶデザイン vol. 6]App Store 読解 vol. 5

既存アプリに学ぶデザイン

たなかゆきこ

2016.07.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

デザイナーのたなかゆきこです。

前回に引き続き App Store の UI について読み解きをしていきたいと思います。私個人の見解ですので、本当は別の意図がある可能性もあります。

今回のアプリ

App Store

まず、タイトル部分ですが、文字数が多い為、中央よりずれてますね。日本語の場合、テキストが多くなったりします。かっこいい海外のアプリを真似すると、入らなかったりテキストサイズが小さすぎたりすることもあります。

learn_ui_design52 「すべて」を「全て」にしていない理由を考えてみたりするのもアリではないかと思います。文字もデザイナーの仕事（私もうまくはないです）

漢字の多い文章は、実は読みづらく、堅苦しさや仰々しさが感じる人が多いです。

iPhone を使う人とのカジュアルコミュニケーションが App Store なのではないでしょうか。

おそらくやわらかな表現として、ひらがなが使用されているのでは？また字面（「じづら」と読む。印刷でよく使ってた用語かなぁ）としてひらがなが良い印象を受けるのかもしれません。

learn_ui_design53 画面をトレースしていて、気がついたのは、アプリアイコンのサイズがオススメ、ランキングとアップデートでだんだん小さくなっていっていること。それに伴い、アイコンのラウンドも小さくなってます。

「購入済み」項目と「アップデート：」タイトルが入るので、できるだけ表示をさせるためでしょうか。テキスト行間も他の画面より小さくなっています。

さらに、左余白が今までだと「15」かと思いきや、「14」。だんだん情報を入れることの方が優先度が高かった結果な気がしてきました。デザインするときは、何を見せたいかの優先度をつけているとわかりやすいかも。しかし、右余白は「15」だったので、実のとこよく分からないですね。

ちなみにスクロールすると、アップデートタイトルは一度画面上部で表示したまま停止するため、今何のリストを見ているのかわかります。

learn_ui_design55 基本線幅が3で、矢印の斜めになっている箇所は少し細くなっています。アイコンの記事にも書きましたが、斜めにすると線が太く見える錯視があり、それを調整しているようです。また、円は右半分は正円になっていますが、左上部はやや変形しています。

ひとまず、App Store の UI 考察終了です。全部きちんと書いたわけではないですが、こんな感じに考えていく地道な活動が大事だと思います。アプリをもっとよく勉強したい方は、やってみてはいかがでしょうか？この辺一通りやればいいのではと思います。

他、好きなアプリで試してみてください。